<template>
  <div id="SettlementMobile">
    <Cell @click.native="openModal" style="margin-bottom:10px;" label="菜单详情">点击查看</Cell>
    <Minput :disabled="true" :readonly="true" label='应收金额' :value="total" tyoe='number'></Minput>
    <Minput :value="fracture" :readonly="true" label='实收金额' tyoe='number'></Minput>
    <Cell @click.native="$refs.pay.focus();" label="支付方式">
      <select v-model="pay_mathods" ref="pay" class="sel">
          <option v-for="i in pay_way" :key="i.id" :value="i.methods">{{i.name}}</option>
      </select>   
    </Cell>    
    <Cell @click.native="$refs.sel.focus();" style="margin-bottom:10px;" label="折扣方式">
      <select ref="sel" class="sel" v-model="fold">
        <option value="">无折扣</option>
        <option v-for="i in discount" :key="i.id" :value="i.discount">{{i.name}}</option>
      </select>
    </Cell>
    
    <Minput v-model="receive" :label="'收到'+pay_way[payIndex].name" tyoe='number'></Minput>
    <Minput :value="change" :readonly="true" label='找零' tyoe='number'></Minput>
    <Minput :value="remark" label='备注' tyoe='text'></Minput>
    <div style="padding:20px 15px;">
      <button @click="printer" style="margin-bottom:20px;" class="btn btn-warning btn-lg btn-block">打印小票</button>
      <button @click="confirm" class="btn btn-success btn-lg btn-block subprint">
          <span class="glyphicon glyphicon-ok"></span> 确认
          <div class="small">结账完毕</div>
      </button>
    </div>
    <Modal title="订单详情" top="37px" :showmodel="openModel" name="openModel" @closeModal="closeModal">
      <div slot="body" class="form-group">
       <table class="table">
          <thead>
              <tr>
                <th>菜品</th>
                <th>单价</th>
                <th>数量</th>
              </tr>
          </thead>
          <tbody>
            <tr :key="i.id" v-for="i in menuList">
              <td>{{i.menu_name}}</td>
              <td>{{i.price}}</td>
              <td>{{i.num}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div slot="footer" class="clearfix">
        <button @click="retreat" class="btn btn-danger pull-left">退菜</button>
        <button type="button" @click="closeModal('openModel')" class="btn btn-default pull-right">关闭</button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Minput from "@/components/Minput";
import Cell from "@/components/Cell";
import Modal from "@/components/Modal";
import { axios, accAdd, accMul, Subtr, openWindow } from "@/static/js/utils";
let scrollTop = 0;
export default {
  name: "SettlementMobile",
  data() {
    return {
      menuList: [],
      discount: [],
      pay_way: [
        { name: "现金", methods: "1" },
        { name: "刷卡", methods: "2" },
        { name: "扫码", methods: "5" }
      ],
      payIndex: 0,
      fold: "",
      receive: "",
      openModel: false,
      pay_mathods: "1",
      tab_num: ""
    };
  },
  components: { Minput, Cell, Modal },
  computed: {
    total() {
      let total = 0;
      this.menuList.forEach(item => {
        total = accAdd(total, accMul(item.price, item.num));
      });
      return total.toFixed(2);
    },
    fracture() {
      let fracture = this.fold
        ? accMul(this.total, this.fold / 10)
        : this.total;
      return parseFloat(fracture).toFixed(2);
    },
    change() {
      return Subtr(this.receive, this.fracture);
    }
  },
  methods: {
    /**
     * 退菜
     */
    retreat() {
      openWindow("retreat.html", "退菜", {
        desk_id: plus.webview.currentWebview().desk_id,
        order_id: plus.webview.currentWebview().order_id
      });
    },
    printer() {
      axios
        .post("menu/printer", {
          order_id: plus.webview.currentWebview().order_id,
          paid: this.receive,
          remark: this.remark
        })
        .then(res => {});
    },
    confirm() {
      mui.confirm(
        "请确认已结账，并且打印小票",
        "提示",
        ["确认", "取消"],
        res => {
          if (res.index == 0) {
            axios
              .post("menu/check_out", {
                order_id: plus.webview.currentWebview().order_id,
                paid: this.receive,
                change: this.change,
                pay_way: this.pay_way[this.payIndex].methods,
                remark: this.remark
              })
              .then(res => {
                if (res.data.code) {
                  mui.back();
                }
              });
          }
        }
      );
    },
    closeModal(val) {
      this[val] = false;
      document.body.classList.remove("openmodal");
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
    },
    openModal() {
      scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      document.body.classList.add("openmodal");
      document.body.style.top = -scrollTop + "px";
      this.openModel = true;
    }
  },
  created() {
    // console.log(plus.webview.currentWebview().order_id)
    axios
      .get("menu/read", {
        params: {
          order_id: plus.webview.currentWebview().order_id
        }
      })
      .then(res => {
        this.menuList = res.data.data.lists;
        this.discount = res.data.data.discount;
        this.receive = this.total;
      });
  },
  mounted() {
    let that = this;
    window.addEventListener("reload", function() {
      axios
        .get("menu/read", {
          params: {
            order_id: plus.webview.currentWebview().order_id
          }
        })
        .then(res => {
          that.menuList = res.data.data.lists;
        });
    });
  }
};
</script>
<style scoped lang="less">
#SettlementMobile {
  background-color: #f4f4f4;
  height: 100vh;
  .sel {
    border: none;
    height: 100%;
    direction: rtl;
    -webkit-appearance: none;
  }
}
</style>

